<template>
  <div class="resume-preview">
    <div class="resume-document">
      <!-- 页面标题 -->
      <div class="preview-header">
        <h1>在线简历</h1>
        <div class="preview-date">
          更新日期：{{ formatDate(new Date()) }}
        </div>
      </div>

      <!-- 基本信息 -->
      <section class="resume-section">
        <div class="section-title">
          <h2>基本信息</h2>
          <div class="title-line"></div>
        </div>
        
        <div class="basic-info">
          <div class="avatar-info">
            <el-avatar :size="80" :src="resume.avatar" class="preview-avatar">
              {{ resume.real_name?.charAt(0) }}
            </el-avatar>
          </div>
          
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">姓名：</span>
              <span class="info-value">{{ resume.real_name || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">学号：</span>
              <span class="info-value">{{ resume.student_id || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">专业：</span>
              <span class="info-value">{{ getMajorLabel(resume.major) || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年级：</span>
              <span class="info-value">{{ resume.grade || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">邮箱：</span>
              <span class="info-value">{{ resume.email || '未填写' }}</span>
            </div>
            <div class="info-item" v-if="resume.gpa">
              <span class="info-label">GPA：</span>
              <span class="info-value">{{ resume.gpa }}</span>
            </div>
          </div>
        </div>

        <div v-if="resume.personal_advantages" class="advantages">
          <h3>个人优势</h3>
          <p>{{ resume.personal_advantages }}</p>
        </div>
      </section>

      <!-- 教育经历 -->
      <section v-if="resume.education_experience?.length" class="resume-section">
        <div class="section-title">
          <h2>教育经历</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(edu, index) in resume.education_experience" :key="index" class="experience-item">
          <div class="experience-header">
            <div class="experience-title">{{ edu.school }}</div>
            <div class="experience-period">
              {{ formatDateRange(edu.start_time, edu.end_time) }}
            </div>
          </div>
          <div class="experience-content">
            <div class="experience-meta">
              <span class="major">{{ edu.major }}</span>
              <span class="degree">{{ getDegreeLabel(edu.degree) }}</span>
              <span v-if="edu.gpa" class="gpa">GPA: {{ edu.gpa }}</span>
            </div>
            <div v-if="edu.description" class="experience-desc">
              {{ edu.description }}
            </div>
          </div>
        </div>
      </section>

      <!-- 实习经历 -->
      <section v-if="resume.internship_experience?.length" class="resume-section">
        <div class="section-title">
          <h2>实习经历</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(internship, index) in resume.internship_experience" :key="index" class="experience-item">
          <div class="experience-header">
            <div class="experience-title">{{ internship.company }} - {{ internship.position }}</div>
            <div class="experience-period">
              {{ formatDateRange(internship.start_time, internship.end_time) }}
              <span v-if="internship.duration"> ({{ internship.duration }})</span>
            </div>
          </div>
          <div class="experience-content">
            <div v-if="internship.description" class="experience-desc">
              <strong>工作描述：</strong>{{ internship.description }}
            </div>
            <div v-if="internship.achievement" class="experience-desc">
              <strong>主要成就：</strong>{{ internship.achievement }}
            </div>
          </div>
        </div>
      </section>

      <!-- 项目经历 -->
      <section v-if="resume.project_experience?.length" class="resume-section">
        <div class="section-title">
          <h2>项目经历</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(project, index) in resume.project_experience" :key="index" class="experience-item">
          <div class="experience-header">
            <div class="experience-title">
              {{ project.project_name }}
              <el-tag v-if="project.role" size="small" class="role-tag">{{ project.role }}</el-tag>
            </div>
            <div class="experience-period">
              {{ formatDateRange(project.start_time, project.end_time) }}
            </div>
          </div>
          <div class="experience-content">
            <div v-if="project.technologies" class="tech-stack">
              <strong>技术栈：</strong>{{ project.technologies }}
            </div>
            <div v-if="project.description" class="experience-desc">
              <strong>项目描述：</strong>{{ project.description }}
            </div>
            <div v-if="project.achievement" class="experience-desc">
              <strong>主要成果：</strong>{{ project.achievement }}
            </div>
            <div v-if="project.project_url" class="project-link">
              <strong>项目链接：</strong>
              <el-link :href="project.project_url" target="_blank" type="primary">
                {{ project.project_url }}
              </el-link>
            </div>
          </div>
        </div>
      </section>

      <!-- 科研经历 -->
      <section v-if="resume.research_experience?.length" class="resume-section">
        <div class="section-title">
          <h2>科研经历</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(research, index) in resume.research_experience" :key="index" class="experience-item">
          <div class="experience-header">
            <div class="experience-title">{{ research.research_title }}</div>
            <div class="experience-period">
              {{ formatDateRange(research.start_time, research.end_time) }}
            </div>
          </div>
          <div class="experience-content">
            <div class="research-meta">
              <span v-if="research.project_type" class="project-type">{{ research.project_type }}</span>
              <span v-if="research.supervisor">指导老师：{{ research.supervisor }}</span>
              <span v-if="research.research_field">研究方向：{{ research.research_field }}</span>
            </div>
            <div v-if="research.description" class="experience-desc">
              <strong>研究描述：</strong>{{ research.description }}
            </div>
            <div v-if="research.achievement" class="experience-desc">
              <strong>研究成果：</strong>{{ research.achievement }}
            </div>
            <div v-if="research.publications" class="experience-desc">
              <strong>发表论文：</strong>{{ research.publications }}
            </div>
          </div>
        </div>
      </section>

      <!-- 竞赛经历 -->
      <section v-if="resume.competition_experience?.length" class="resume-section">
        <div class="section-title">
          <h2>竞赛经历</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(competition, index) in resume.competition_experience" :key="index" class="experience-item">
          <div class="experience-header">
            <div class="experience-title">{{ competition.competition_name }}</div>
            <div class="experience-period">
              {{ formatDate(competition.competition_time) }}
            </div>
          </div>
          <div class="experience-content">
            <div class="competition-meta">
              <span v-if="competition.organization">{{ competition.organization }}</span>
              <el-tag v-if="competition.award" type="success" size="small">{{ competition.award }}</el-tag>
              <el-tag v-if="competition.ranking" type="warning" size="small">第{{ competition.ranking }}</el-tag>
            </div>
            <div v-if="competition.description" class="experience-desc">
              <strong>竞赛描述：</strong>{{ competition.description }}
            </div>
            <div v-if="competition.achievement" class="experience-desc">
              <strong>主要成就：</strong>{{ competition.achievement }}
            </div>
          </div>
        </div>
      </section>

      <!-- 自定义字段 -->
      <section v-if="resume.custom_sections?.length" class="resume-section">
        <div class="section-title">
          <h2>其他信息</h2>
          <div class="title-line"></div>
        </div>
        
        <div v-for="(section, index) in resume.custom_sections" :key="index" class="custom-section">
          <h3>{{ section.title }}</h3>
          <div class="custom-content">
            {{ section.content }}
          </div>
        </div>
      </section>

      <!-- 页脚 -->
      <div class="resume-footer">
        <p>此简历由中山大学研究生院校企对接平台生成</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Resume, majorLabels, degreeOptions } from '@/api/resume'

interface Props {
  resume: Resume
}

defineProps<Props>()

// 格式化日期
const formatDate = (date: string | Date) => {
  const d = new Date(date)
  return d.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 格式化日期范围
const formatDateRange = (start: string, end: string) => {
  return `${formatDate(start)} - ${formatDate(end)}`
}

// 获取专业标签
const getMajorLabel = (majorProp: string) => {
  if (!majorProp) return ''
  const option = majorLabels.find(opt => opt.value === majorProp)
  return option ? option.label : majorProp
}

// 获取学历标签
const getDegreeLabel = (degree: string) => {
  if (!degree) return ''
  const option = degreeOptions.find(opt => opt.value === degree)
  return option ? option.label : degree
}
</script>

<style scoped>
.resume-preview {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.resume-document {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.preview-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #409eff;
}

.preview-header h1 {
  margin: 0 0 10px 0;
  color: #409eff;
  font-size: 28px;
  font-weight: 600;
}

.preview-date {
  color: #666;
  font-size: 14px;
}

.resume-section {
  margin-bottom: 30px;
}

.section-title {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.section-title h2 {
  margin: 0;
  color: #409eff;
  font-size: 20px;
  margin-right: 15px;
}

.title-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #409eff, transparent);
}

.basic-info {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.avatar-info {
  flex-shrink: 0;
}

.preview-avatar {
  border: 3px solid #409eff;
}

.info-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
  min-width: 60px;
}

.info-value {
  color: #666;
}

.advantages {
  margin-top: 20px;
  padding: 20px;
  background: #<｜tool▁call▁begin｜>f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.advantages h3 {
  margin: 0 0 10px 0;
  color: #409eff;
  font-size: 16px;
}

.advantages p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.6;
}

.experience-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.experience-item:last-child {
  border-bottom: none;
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.experience-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.experience-period {
  font-size: 14px;
  color: #666;
}

.role-tag {
  margin-left: 8px;
}

.experience-meta {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.experience-meta span {
  margin-right: 15px;
}

.major {
  font-weight: 500;
  color: #409eff;
}

.degree {
  font-weight: 500;
  color: #333;
}

.gpa {
  background: #f0f9ff;
  color: #409eff;
  padding: 2px 6px;
  border-radius: 4px;
}

.experience-desc {
  margin-bottom: 8px;
  line-height: 1.6;
  white-space: pre-line;
}

.tech-stack {
  margin-bottom: 8px;
  font-size: 14px;
}

.project-link {
  font-size: 14px;
}

.research-meta {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.research-meta span {
  margin-right: 15px;
}

.project-type {
  background: #fff7e6;
  color: #fa8c16;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.competition-meta {
  margin-bottom: 8px;
}

.competition-meta span,
.competition-meta .el-tag {
  margin-right: 10px;
}

.custom-section {
  margin-bottom: 20px;
}

.custom-section h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 5px;
}

.custom-content {
  line-height: 1.6;
  white-space: pre-line;
}

.resume-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
  text-align: center;
}

.resume-footer p {
  margin: 0;
  color: #999;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resume-preview {
    padding: 10px;
  }
  
  .resume-document {
    padding: 20px;
  }
  
  .basic-info {
    flex-direction: column;
    gap: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .experience-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}
</style>
